<template>
	<div class="ibox" style="margin-top:10px;">
		<link href="/css/plugins/dataTables/datatables.min.css" rel="stylesheet" />
		<div v-if="title" class="ibox-title">
			<h5>{{ title }}</h5>
		</div>
		<div class="ibox-content">
			<div class="table-responsive">
				<table :id="id" class="table table-striped table-bordered table-hover dataTables-summary">
					<thead>
						<tr>
							<th v-bind:key="col" v-for="col in cols">{{col}}</th>
						</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
/* eslint-disable */
export default {
	name: 'primary_table',
	data() {
		return {
			p_table: null
		};
	},
	props: {
		title: String,
		cols: Array,
		table_data: null,
		show_keys: Array,
		detail: String,
		id: String,
		hid: String
	},
	methods: {
		update_table_data: function() {
			for (var i = 0; i < this.show_keys.length; i++) {
				this.show_keys[i] = { data: this.show_keys[i] };
			}
			this.p_table = $('#' + this.id).DataTable({
				destroy: true,
				data: this.table_data,
				columns: this.show_keys,
				pageLength: 10,
				responsive: true,
				bAutoWidth: false,
				order: [0, 'desc'],
				dom: '<"html5buttons"B>lTfgitp',
				buttons: [
					{ extend: 'copy' },
					{ extend: 'excel', title: 'ExampleFile' },
					{ extend: 'pdf', title: 'ExampleFile' },
					{
						extend: 'print',
						customize: function(win) {
							$(win.document.body).addClass('white-bg');
							$(win.document.body).css('font-size', '10px');
							$(win.document.body)
								.find('table')
								.addClass('compact')
								.css('font-size', 'inherit');
						}
					}
				]
			});
			// this.render_click();
		},
		update_data: function(new_data) {
			var currentPage = this.p_table.page(); //该行是固定写死的
			this.p_table.clear(); //清理原数据
			this.p_table.rows.add(new_data); //添加新数据
			this.p_table.page(currentPage).draw(false);
			this.p_table.columns.adjust().draw();
			$('#' + this.id).show();
			// this.render_click(new_data);
		},
		get_detail: function(date) {
			this.$emit('get_detail', date);
			$('#detail_btn').hide();
		}
		// render_click:function(new_data){
		//     var data = this.table_data;
		//     if(new_data){
		//         data = new_data;
		//     }
		//     var get_detail = this.get_detail;
		//     for(var i=0; i<data.length;i++){
		//         var a=i;
		//         var date = data[a].updateDate
		//         $("#"+date).click(function(){
		//             get_detail(this.id);
		//         });
		//     }
		// }
	},
	mounted() {
		this.update_table_data();
		if (this.hid == 'true') {
			$('#' + this.id).hide();
		}
	}
};
</script>
<style scoped>
</style>